<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线反馈</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <link rel="stylesheet" href="/Public/css/feedback.css">
    <style>

        body{
            font-size: 12px;
        }
        .user_name{
            cursor: pointer;
            color: black;
        }
        .user_name:hover{
            color: #31b0d5;
        }
    </style>
</head>
<body>
<div class="scrollbar animated fadeInRight" id="style-1" style="overflow:scroll;overflow-x:hidden;">
    <div id="main_C" style="float: left;width: 99%">
        <div class="title_info">
            <span>在线反馈</span>
        </div>
        <div class="white_bgColor notice_info">
            <!--顶部选项-->
            <ul class="feedback_ul">
                <li><a href="javascript:void(0);" class="a_active">未回复</a></li>
                <li><a href="javascript:void(0);">已回复</a></li>
                <li><a href="javascript:void(0);">未完结</a></li>
                <li><a href="javascript:void(0);">超时未回复</a></li>
            </ul>

            <!--内容-->
            <div class="feedback_a_content">
                <div id="unfeedback">
                    <volist name="data" id="vo">
                        <div class="feedback_content animated fadeInRight">
                            <div style="overflow: hidden;background: #f6f6f6">
                                <div class="content_left">
                                    <span class="user_name"> <a onclick="user_info('<{$vo.mobile}>')" >    <{$vo.username}> </a><img src="/Public/image/icon_phone.png" height="20" width="20" onclick="call_phone('<{$vo.mobile}>')"/></span>
                                    <span style="display: none"><{$vo.mobile}> </span>
                                    <span>  <{$vo.user_id}>  </span>
                                </div>
                                <div class="content_right">
                                    <div class="content_question">
                                        <span><{$vo.ctime}> </span>
                                        <span><{$vo.content}> </span>
                                    </div>
                                    <div class="content_reply">
                                        <span>回复数<span class="red_color">(<{$vo.back_num}>)</span></span>
                                        <span>最后回复时间：<{$vo.back_time}> </span>
                                        <input type="button" value="回复"
                                               onclick="javascrtpt:window.location.href='feedback_detail?id=<{$vo.id}>'"/>
                                    </div>

                                    <div class="state_div">
                                        <img src="/Public/image/icon_end.png" height="15" width="15"/>
                                        <span><{$vo.status}> </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </volist>

                </div>
                <!--分页-->
                <div style="text-align: center;margin: 100px auto 0">
                    <ul class="pagination" id="page1"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button"></button>
                    </div>
                </div>
            </div>

            <div style="display: none" class="feedback_a_content animated fadeInRight">
                <div id="already_back">

                </div>

                <!--分页-->
                <div style="text-align: center;margin: 100px auto 0">
                    <ul class="pagination" id="page2"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button"></button>
                    </div>
                </div>
            </div>


            <div style="display: none" class="feedback_a_content animated fadeInRight">

                <div id="unfinish">

                </div>


                <!--分页-->
                <div style="text-align: center;margin: 100px auto 0">
                    <ul class="pagination" id="page3"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button"></button>
                    </div>
                </div>
            </div>
            <div style="display: none" class="feedback_a_content animated fadeInRight">

                <div id="over_time">

                </div>
                <!--分页-->
                <div style="text-align: center;margin: 100px auto 0">
                    <ul class="pagination" id="page4"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button"></button>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<script src="/Public/js/pager.js"></script>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/layer/layer.js"></script>
<script src="/Public/js/layui/layui.js"></script>


<script>

    window.parent.get_feedback_num();
    //调用父方法

    function user_info(mobile) {
        window.parent.get_user(mobile);
    }

    //进入详情
    function detail(id) {

        window.location.href = "feedback_detail?id=" + id;
    }

    //回复列表
    function get_feedbaack(status, page) {
        sessionStorage.setItem("fb_page", page);
        var url = "<{$SERVER_NAME}>/Feedback/kf_user_list_feedback";
        $.post(url, {status: status, page: page}, function (data) {
            if (data.code == '1001') {
                var obj = data.result;
                var len = obj.length;
                var s = "";
                for (var i = 0; i < len; i++) {
                    s += "<div class='feedback_content'> <div style='overflow: hidden;background: #f6f6f6'> <div class='content_left'> <span class='user_name'>   <a onclick=user_info('"+obj[i].mobile+"')> " + obj[i].username + "</a>   <img src='/Public/image/icon_phone.png' height='20' width='20' onclick=call_phone('"+obj[i].mobile+"') /></span> <span>" + obj[i].user_id + " </span> </div> <div class='content_right'> <div class='content_question'> <span> " + obj[i].ctime + " </span> <span> " + obj[i].content + " </span> </div> <div class='content_reply'> <span>回复数<span class='red_color'>(" + obj[i].back_num + ")</span></span> <span>最后回复时间：" + obj[i].back_time + "</span> <input id='record_btn' type='button' value='回复' onclick='detail(" + obj[i].id + ")'/>  </div> <div class='state_div'> <img src='/Public/image/icon_end.png' height='15' width='15'/> <span>" + obj[i].status + "</span> </div> </div> </div> </div> <hr>";
                }
                if (status == 1) {
                    document.getElementById("unfeedback").innerHTML = s; //未回复
                } else if (status == 2) {
                    document.getElementById("already_back").innerHTML = s; //已回复
                } else if (status == 3) {
                    document.getElementById("unfinish").innerHTML = s; //已回复
                } else if (status == 4) {
                    document.getElementById("over_time").innerHTML = s; //已回复
                }
            }
        });
    }

    /*默认分页*/
    var fist_tol = "<{$tol}>";
    var fist_count = "<{$count}>";
    if (fist_count < 10) {
        $("#page1").hide();
    }

    Page({
        num: fist_tol,					//页码数
        startnum: 1,				//指定页码
        elem: $('#page1'),		//指定的元素
        callback: function (n) {	//回调函数
            get_feedbaack(1, n);
        }
    });

    //选项卡切换
    $(document).ready(function () {
        $(".feedback_ul li").click(function () {
            $(".feedback_a_content").hide().eq($(this).index()).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(this).children("a").addClass("a_active");
            var index = $(this).index() + 1;
            sessionStorage.setItem("fb_tab_index", index - 1);
            sessionStorage.setItem('fb_page', 1);
            var url = "<{$SERVER_NAME}>/Feedback/kf_user_list_feedback";
            switch (index) { //未回复
                case 1:
                    $.post(url, {status: 1}, function (data) {
                        if (data.code == '1001') {
                            var obj = data.result;
                            var len = obj.length;
                            var s = "";
                            if (data.count < 10) {
                                $("#page1").hide();
                            }
                            sessionStorage.setItem("fb_total", data.tol);
//                            /*分页*/
                            Page({
                                num: data.tol,			//页码数
                                startnum: 1,			//指定页码
                                elem: $('#page1'),		//指定的元素
                                callback: function (n) {//回调函数
                                    get_feedbaack(1, n);
                                }
                            });

                            for (var i = 0; i < len; i++) {
                                s += "<div class='feedback_content'>" +
                                    " <div style='overflow: hidden;background: #f6f6f6'>" +
                                    " <div class='content_left'> " +
                                    "<span class='user_name'>  <a onclick=user_info('"+obj[i].mobile+"')> " + obj[i].username + " </a><img src='/Public/image/icon_phone.png' height='20' width='20' onclick=call_phone('"+obj[i].mobile+"') /></span>" +
                                    " <span>" + obj[i].user_id + " </span> " +
                                    "</div> <div class='content_right'> " +
                                    "<div class='content_question'>" +
                                    " <span> " + obj[i].ctime + " </span>" +
                                    " <span> " + obj[i].content + " </span> " +
                                    "</div> <div class='content_reply'>" +
                                    " <span>回复数<span class='red_color'>(" + obj[i].back_num + ")</span></span>" +
                                    " <span>最后回复时间：" + obj[i].back_time + "</span>" +
                                    " <input id='record_btn' type='button' value='回复' onclick='detail(" + obj[i].id + ")'/>" +
                                    " </div> <div class='state_div'> " +
                                    "<img src='/Public/image/icon_end.png' height='15' width='15'/> " +
                                    "<span>" + obj[i].status + "</span> </div> </div> </div> </div> <hr>";
                            }
                            document.getElementById("unfeedback").innerHTML = s;
                        }
                    });
                    break;
                case 2://已回复

                    $.post(url, {status: 2}, function (data) {
                        if (data.code == '1001') {
                            var obj = data.result;
                            var len = obj.length;
                            var s = "";
                            if (data.count < 10) {
                                $("#page2").hide();
                            }
                            sessionStorage.setItem("fb_total", data.tol);
//                            /*分页*/
                            Page({
                                num: data.tol,					//页码数
                                startnum: 1,				//指定页码
                                elem: $('#page2'),		//指定的元素
                                callback: function (n) {	//回调函数
                                    get_feedbaack(2, n);
                                }
                            });
                            for (var i = 0; i < len; i++) {
                                s += "<div class='feedback_content'> <div style='overflow: hidden;background: #f6f6f6'> <div class='content_left'> <span class='user_name'>  <a onclick=user_info('"+obj[i].mobile+"')>" + obj[i].username + "</a> <img  src='/Public/image/icon_phone.png' height='20' width='20' onclick=call_phone('"+obj[i].mobile+"') /></span> <span>" + obj[i].user_id + " </span> </div> <div class='content_right'> <div class='content_question'> <span> " + obj[i].ctime + " </span> <span> " + obj[i].content + " </span> </div> <div class='content_reply'> <span>回复数<span class='red_color'>(" + obj[i].back_num + ")</span></span> <span>最后回复时间：" + obj[i].back_time + "</span> <input id='record_btn' type='button' value='回复' onclick='detail(" + obj[i].id + ")'/> </div> <div class='state_div'> <img src='/Public/image/icon_end.png' height='15' width='15'/> <span>" + obj[i].status + "</span> </div> </div> </div> </div> <hr>";
                            }
                            document.getElementById("already_back").innerHTML = s;
                        }
                    });
                    break;
                case 3:

                    $.post(url, {status: 3}, function (data) {
                        if (data.code == '1001') {
                            var obj = data.result;
                            var len = obj.length;
                            var s = "";
                            if (data.count < 10) {
                                $("#page3").hide();
                            }
                            sessionStorage.setItem("fb_total", data.tol);
//                            /*分页*/
                            Page({
                                num: data.tol,					//页码数
                                startnum: 1,				//指定页码
                                elem: $('#page3'),		//指定的元素
                                callback: function (n) {	//回调函数
                                    get_feedbaack(3, n);
                                }
                            });
                            for (var i = 0; i < len; i++) {
                                s += "<div class='feedback_content'> <div style='overflow: hidden;background: #f6f6f6'> <div class='content_left'> <span class='user_name'>  <a onclick=user_info('"+obj[i].mobile+"')>" + obj[i].username + "</a> <img src='/Public/image/icon_phone.png' height='20' width='20' onclick=call_phone('"+obj[i].mobile+"') /></span> <span>" + obj[i].user_id + " </span> </div> <div class='content_right'> <div class='content_question'> <span> " + obj[i].ctime + " </span> <span> " + obj[i].content + " </span> </div> <div class='content_reply'> <span>回复数<span class='red_color'>(" + obj[i].back_num + ")</span></span> <span>最后回复时间：" + obj[i].back_time + "</span> <input id='record_btn' type='button' value='回复' onclick='detail(" + obj[i].id + ")'/> </div> <div class='state_div'> <img src='/Public/image/icon_end.png' height='15' width='15'/> <span>" + obj[i].status + "</span> </div> </div> </div> </div> <hr>";
                            }
                            document.getElementById("unfinish").innerHTML = s;
                        }
                    });

                    break;
                case 4://超时未回复
                    $.post(url, {status: 4}, function (data) {
                        if (data.code == '1001') {
//
                            var obj = data.result;
                            var len = obj.length;
                            var s = "";
                            if (data.count < 10) {
                                $("#page4").hide();
                            }
                            sessionStorage.setItem("fb_total", data.tol);
//                            /*分页*/
                            Page({
                                num: data.tol,					//页码数
                                startnum: 1,				//指定页码
                                elem: $('#page4'),		//指定的元素
                                callback: function (n) {	//回调函数
                                    get_feedbaack(4, n);
                                }
                            });
                            for (var i = 0; i < len; i++) {
                                s += "<div class='feedback_content'> <div style='overflow: hidden;background: #f6f6f6'> <div class='content_left'> <span class='user_name'>  <a onclick=user_info('"+obj[i].mobile+"')>" + obj[i].username + "</a> <img src='/Public/image/icon_phone.png' height='20' width='20' onclick=call_phone('"+obj[i].mobile+"') /></span> <span>" + obj[i].user_id + " </span> </div> <div class='content_right'> <div class='content_question'> <span> " + obj[i].ctime + " </span> <span> " + obj[i].content + " </span> </div> <div class='content_reply'> <span>回复数<span class='red_color'>(" + obj[i].back_num + ")</span></span> <span>最后回复时间：" + obj[i].back_time + "</span> <input id='record_btn' type='button' value='回复' onclick='detail(" + obj[i].id + ")'/> </div> <div class='state_div'> <img src='/Public/image/icon_end.png' height='15' width='15'/> <span>" + obj[i].status + "</span> </div> </div> </div> </div> <hr>";
                            }
                            document.getElementById("over_time").innerHTML = s;
                        }
                    });
                    break;
            }
        });

        //  返回前的页面

        var tab_index = parseInt(sessionStorage.getItem('fb_tab_index'));
        var page = parseInt(sessionStorage.getItem('fb_page'));
        var fb_total = parseInt(sessionStorage.getItem('fb_total'));
        if (tab_index >= 0 || page >= 0) {
            if (tab_index == '' || tab_index == null) {
                tab_index = 0;
            }
            $(".feedback_a_content").hide().eq(tab_index).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(".feedback_ul li a").eq(tab_index).addClass("a_active");
            get_feedbaack(tab_index + 1, page);
            var page_id = "#page1";
            if (tab_index == '0') {
                page_id = "#page1";
            } else if (tab_index == '1') {
                page_id = "#page2";
            } else if (tab_index == '2') {
                page_id = "#page3";
            } else if (tab_index == '3') {
                page_id = "#page4";
            }

            /*分页*/
            Page({
                            num: fb_total,					//页码数
                            startnum: page,				//指定页码
                            elem: $(page_id),		//指定的元素
                callback: function (n) {	//回调函数
                get_feedbaack(tab_index + 1, n);
            }
            });

        }


    });

    //拨打电话给用户
    function call_phone(mobile) {

          user_info(mobile);
        console.log('momomo',mobile);
            var index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            var url = "<{$SERVER_NAME}>/AntiUser/call";
            if (mobile == "") {
//                layer.close(index);
                return false;
            }

            layer.alert("确认外呼", {title: '提示框', icon: 3}, function (index) {
                $.post(url, {phone: mobile}, function (data) {
                    console.log('1111111', data);
                    layer.close(index);
                });
                layer.close(index);
            });
            layer.close(index);
    }



</script>
</body>
</html>